<template>
    <div>
        <el-form :inline="true" :model="searchParam" class="demo-form-inline">
      <el-form-item>
        <el-input
            clearable
            v-model="searchParam.loginName"
            placeholder="登录名称"
        />
      </el-form-item>
      <el-form-item style="width: 300px">
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="data.chatRooms" border style="width: 100%" v-loading="data.loading" element-loading-text="拼命加载中">
      <el-table-column fixed prop="houseUserName" label="房主名称" align="center" width="300px"/>
      <el-table-column prop="chatUserName" label="聊天人名称" align="center" width="150px"/>
      <el-table-column
          prop="createTime"
          label="创建时间"
          width="180"
          align="center"
      >
      </el-table-column>
      <el-table-column
          prop="updateTime"
          label="更新时间"
          width="180"
          align="center"
      >
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="230" align="center">
        <template #default="scope">
          <el-button
              class="button-space"
              @click="viewChatMessageHistory(scope.row.uuid)"
              type="info"
              size="mini"
          >聊天记录
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        background
        layout="prev, pager, next"
        :total="data.total"
        style="text-align: center; margin-top: 10px"
        @current-change="currentChange"
    >
    </el-pagination>
    </div>
</template>

<script>
import { reactive } from '@vue/reactivity'
import { page } from '../../api/chat/chatRoom'
import { onMounted } from '@vue/runtime-core'
import {useRouter} from 'vue-router'
export default{
    setup(){
        const data = reactive({
            chatRooms:[],
            total:0
        })
        const searchParam = reactive({
            page:1,
            size: 10,
            loginName: ''
        })
        const router = useRouter();
        /**
         * 分页查询聊天室
         */
        const pageSearchChatRoom = async () => {
            page(searchParam).then(res => {
                data.chatRooms = res.data.records
                data.total = res.data.total
            })
        }
        /**
         * 查询
         */
        const search = () => {
            pageSearchChatRoom()
        }
        /**
         * 跳转到聊天记录页面
         * @param {*} uuid 
         */
        const viewChatMessageHistory = (uuid) => {
            router.push({ path: "/chatRoom/chatHistory", query: { uuid: uuid } })
        }
        onMounted(() => {
            pageSearchChatRoom()
        })
        return{
            data,
            searchParam,
            search,
            viewChatMessageHistory
        }
    }
}
</script>
